<template>
  <div style="padding: 10px">
    <d-select-table
      v-model="selectValue"
      :tableConfig="tableConfig"
      @get-select-row="getSelectRow"></d-select-table>
    <p>selectValue值：{{ selectValue }}</p>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import { ref } from 'vue'
  const selectValue = ref(1)

  const tableConfig = {
    showPagination: false,
    rowKey: 'id',
    props: { label: 'name', value: 'id' },
    data: [
      { date: '2016-05-03', name: 'Tom1', address: 'No. 189, Grove St, Los Angeles', id: 1 },
      { date: '2016-05-02', name: 'Tom2', address: 'No. 189, Grove St, Los Angeles', id: 2 },
      { date: '2016-05-04', name: 'Tom3', address: 'No. 189, Grove St, Los Angeles', id: 3 }
    ],
    columns: [
      { label: '单选', cType: 'radio', width: '90' },
      { label: '日期', prop: 'date', width: 120 },
      { label: '姓名', prop: 'name' },
      { label: 'id', prop: 'id' }
    ]
  }
  const getSelectRow = (row: any) => {
    ElMessage.success('选中行数据：' + JSON.stringify(row))
  }
</script>
